<template>
	<div :class="headIos?'details_container-ios':'details_wrapper'">
		<k-header headTitle="背调报告" goBack="true" rightTitle="邀请入职" @rightClick="goAddsecret"></k-header>
		<div v-if="!ifReport" class="noMassage">
				<img src="../../assets/img/no-massage.png" alt="">
				<div class="submitBtn">
					<p>背调报告详情异常，请稍后再试。</p>
				</div>
		</div>
		<div v-if="countError">
			<div class="validation" style="">
				<i style=""></i><span>报告有{{count}}处存在异常</span>
			</div>
			<Reference style="top:85px" :datadetails="datadetails" v-if="flag && ifReport && !headIos"></Reference>
			<Reference style="top:105px" :datadetails="datadetails" v-if="flag && ifReport && headIos"></Reference>
		</div>
		<div v-if="eleError">
		     <div class="validation" style="">
		     	<i style=""></i><span>3要素失败</span>
		     </div>
				<Reference  style="top:85px" :datadetails="datadetails" v-if="flag && ifReport && !headIos"></Reference>
				<Reference  style="top:105px" :datadetails="datadetails" v-if="flag && ifReport && headIos"></Reference>
		</div>
		<div v-if="noError">
			<Reference :datadetails="datadetails" v-if="flag && ifReport"></Reference>
		</div>
	</div>
</template>

<script>
	import kHeader from '../common/head';
	import Reference from './reference';
	import util from '../../libs/util';

	export default {
		data(){
			return{
				datadetails:{},
				flag:false,
				showDetails:false,
				reqReportId:'',
				name:'',
				idCard:'',
				mobile:'',
				repordId:'',
				ifReport:true,
				count:0,
				noError:true,
				eleError:false,
				countError:false,
				headIos:false
			}
		},
		components:{
			kHeader,
			Reference
		},
		mounted () {
			this.axIos();
		},
		created(){
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			this.reqReportId=this.$route.query.id;
		},
		methods:{
			axIos(){
				var that = this;
		        var url = '/lblsapp-h5/v2/report/queryResCreditReportByReqReportId.json';
		        let data = {reqReportId:that.reqReportId};
		        util.ajax.post(url, data).then(function(data){
		        	that.flag=true;
		            if(data.data.code==='11'){
		            	that.$router.push({ path: '/'})	
		            }else if(data.data.code==='0'){
		            	if(data.data.res.data){
		            		//三网验证
		            		if(data.data.res.data.resCreditReport.isAuthPassed==='1'){
		            			that.noError=false;
		            			that.eleError=true;
		            		};
		            		//p2p网络黑名单
		            		if(data.data.res.data.creditNotifyModel.p2pBlackResult.p2pBlackList.length>0){
								that.count+=1
							}
		            		//社会不良记录
		            		if(data.data.res.data.creditNotifyModel.personBadInfoResult.personBadInfo.resultData.length>0){
		            			that.count+=1
		            		}
		            		//被执行人记录
		            		if(data.data.res.data.creditNotifyModel.executedResult.executedList.length){
		            			that.count+=1
		            		}
		            		if(that.count>0){
		            			that.noError=false;
		            			that.countError=true;
		            		}
		            		that.datadetails = data.data.res.data;
			            	that.idCard=that.datadetails.creditNotifyModel.idCard;
			            	that.name=that.datadetails.creditNotifyModel.name;
			            	that.mobile=that.datadetails.creditNotifyModel.mobile;
		            	}else{
		            		that.ifReport=false;
		            	}
		            	
		            }else{
		            	that.ifReport=false;
		            }
		        }).catch(function(error){
		            console.log(error)
		        })
            },
            goAddsecret(){
            	this.$router.push({ path: '/addsecret',query: {idCard:this.idCard,name:this.name,mobile:this.mobile,repordId:this.reqReportId}})
            }
			
		}
	
	}
		
</script>

<style scoped>
	.details_wrapper{
	    padding-top: 45px;
	    height: 100%;
	    box-sizing: border-box;
	}
	.details_container-ios{
			padding-top: 65px;
	    height: 100%;
	    box-sizing: border-box;
	}
	.web_error{
	    position: absolute;
	    width: 100%;
	    text-align: center;
	    color: red;
	    font-size: 2rem;
	    background: none;
	}
	.noMassage {
	    height: 100%;
	}
	.noMassage img{
	    display: block;
	    width: 4.5rem;
	    height: 14rem;
	    padding-top: 10%;
	    margin: auto;
	}
	.submitBtn {
	    margin-top: 20px;
	    width: 100%;
	}
	.submitBtn div{
	    height: 30px;
	    width: 80%;
	    margin: auto;
	    text-align: center;
	    line-height: 30px;
	    color: white;
	    background: #f89721;
	    border-radius: 8px;
	}
	.validation{
		width: 100%;
		text-align: center; 
		height: 30px;
		background: #FF8A7A;
		line-height: 30px;
		color: #FFFFFF;
		font-size: 0;
	}
	.validation i{
		width: 12px;
		height: 12px;
		margin-top: 9px;
		margin-right: 5px; 
		display: inline-block; 
		background: url(../../assets/img/reference/failture.png) no-repeat center;
		background-size: 12px 12px;
		vertical-align: top;
	}
	.validation span{
		font-size: 1.2rem;
	}
	.go-new{
		color: red;
	}
</style>